<template>
  <div class="container">
    <div class="main-content">
      <div style="text-align: right">
        <a-button type="primary" @click="handleCreate"
          ><template #icon><IconPlus /></template>新增</a-button
        >
      </div>
      <a-divider :margin="10" />
      <a-spin :loading="data.loading">
        <a-table :data="data.tableData" :pagination="false">
          <template #columns>
            <a-table-column title="序号" :width="100">
              <template #cell="{ rowIndex }">{{ rowIndex + 1 }}</template>
            </a-table-column>
            <a-table-column title="名称" data-index="templateName" :width="200"> </a-table-column>
            <a-table-column title="描述" data-index="description" />
            <a-table-column title="操作" :width="200">
              <template #cell="{ record }">
                <a-button type="text" @click="handleEdit(record)">
                  <template #icon><IconEdit /></template> 编辑
                </a-button>
                <a-button type="text" status="danger" @click="handleDelete(record)">
                  <template #icon><IconDelete /></template>删除
                </a-button>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <a-pagination
          class="mt-2 float-right"
          :total="data.pagination.total"
          :current="data.pagination.pageNum"
          :page-size="data.pagination.pageSize"
          @change="handlePageChange"
          @page-size-change="handlePageSizeChange"
          style="float: right; margin-right: 20px; margin-top: 20px; justify-content: end"
        ></a-pagination>
      </a-spin>
      <a-modal
        v-if="data.showModal"
        v-model:visible="data.showModal"
        :title="data.title"
        class="modelCont"
        width="40%"
        @before-ok="handleSubmit"
        @cancel="handleCancel"
      >
        <a-form :model="data.form" ref="formRef">
          <a-form-item label="名称" field="templateName" :rules="[{ required: true, message: '请输入' }]">
            <a-input v-model="data.form.templateName" placeholder="请输入模板名称"> </a-input
          ></a-form-item>
          <a-form-item label="代码" field="content" :rules="[{ required: true, message: '请输入' }]">
            <Editor ref="editorRef" :value="data.form.content" @update:value="handleUpdateValue" />
          </a-form-item>
          <a-form-item label="描述" field="description" :rules="[{ required: true, message: '请输入模板描述' }]">
            <a-input v-model="data.form.description" placeholder="请输入模板描述"> </a-input
          ></a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script setup>
import { Message, Modal } from '@arco-design/web-vue'
import { ref, reactive, onMounted } from 'vue'
import Editor from './components/edit.vue'
import { apiTemplate } from '@/api/complexModel'

const FORM = {
  templateName: '',
  content: '',
  description: ''
}

const data = reactive({
  loading: false,
  title: '新增',
  showModal: false,
  tableData: [],
  form: { ...FORM },
  pagination: {
    total: 0,
    pageStart: 1,
    pageSize: 10
  }
})

const formRef = ref(null)
const editorRef = ref(null)

const handleCreate = () => {
  data.showModal = true
  data.title = '新增'
  data.form = { ...FORM }
}

const handleEdit = (row) => {
  data.showModal = true
  data.title = '编辑'
  data.form = { ...row }
}

const handleDelete = (row) => {
  Modal.confirm({
    title: '提示',
    content: '确定删除吗？',
    onOk: () => {
      apiTemplate.deleteParams(row.id).then((res) => {
        if (+res.code === 200) {
          Message.success('删除成功')
          getList()
        }
      })
    }
  })
}

const handlePageChange = (page) => {
  data.pagination.pageStart = page
  getList()
}

const handlePageSizeChange = (size) => {
  data.pagination.pageSize = size
  getList()
}

const handleUpdateValue = (newValue) => {
  data.form.content = newValue
}

const handleSubmit = (done) => {
  formRef.value.validate((errors) => {
    if (!errors) {
      console.log('success', data.form)
      done(true)
      const api = data.form.id ? apiTemplate.updateParams : apiTemplate.saveParams
      api(data.form).then((res) => {
        if (+res.code === 200) {
          getList()
          handleCancel()
          Message.success(data.form.id ? '编辑成功' : '新建成功')
          done()
        } else {
          done(false)
        }
      })
    } else {
      console.log('error', errors)
      done(false)
    }
  })
}

const handleCancel = () => {
  data.showModal = false
  formRef.value.resetFields()
}

const getList = () => {
  data.loading = true
  apiTemplate
    .getList(data.pagination)
    .then((res) => {
      if (res.code === 200) {
        console.log(res.data)
        data.loading = false
        data.tableData = res.data.list
        data.pagination.total = +res.data.total
      }
    })
    .finally(() => {
      data.loading = false
    })
}

onMounted(() => {
  getList()
})
</script>

<style lang="less" scoped>
.lookBtn {
  color: #1d68d0;
}
.modelCont {
  width: 860px;
}
.btnBox {
  display: flex;
  div {
    margin-right: 10px;
    cursor: pointer;
  }
}
.container {
  display: flex;
  min-height: calc(100vh - 56px);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
</style>
